<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <th:block th:include="include :: header('角色资源授权列表')"/>
    <style>
        .layui-card-body .layui-form {
            margin: auto;
        }
        .layui-form-item {
            margin-bottom: 0px;
        }

        .bottom {
            width: 100%;
            position: absolute;
            bottom: 0px;
            left: 0px;
            height: 41px;
            background-color: #F8F8F8;
            border-top: 1px solid #eee;
        }

        .button-container {
            position: absolute;
            right: 15px;
            margin-top: 5px;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-body" id="card1">
                <form id="formId" class=" layui-form layui-form-pane">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">角色</label>
                            <div class="layui-input-inline">
                                <input type="text" name="name" placeholder="请输入角色"
                                       class="layui-input" />
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn layui-btn-md" lay-submit lay-filter="rolePermission-query">
                                <i class="layui-icon layui-icon-search"></i>
                                查询
                            </button>
                            <button type="reset" class="layui-btn layui-btn-md layui-btn-primary">
                                <i class="layui-icon layui-icon-refresh"></i>
                                重置
                            </button>
                        </div>
                    </div>
                </form>
                <table id="rolePermission-table" lay-filter="rolePermission-table"></table>
                <script type="text/html" id="rolePermission-bar">
                    <button sec:authorize="hasPermission('/sys/rolePermission/edit','sys:rolePermission:edit')"
                            class="layui-btn layui-btn-primary layui-btn-sm" lay-event="edit"><i
                            class="layui-icon layui-icon-edit"></i>
                    </button>
                </script>
            </div>
        </div>
    </div>
    <div class="layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-body" id="card2">

                    <form action="" class=" layui-form layui-form-pane">
                        <div class="mainBox" style=" overflow: auto">
                            <ul data-id="0" id="role-power"></ul>
                        </div>


                    </form>

                <div class="bottom" style="position: relative">
                    <div class="button-container">
                        <button class="layui-btn layui-btn-sm" lay-filter="power-save" lay-submit="" type="submit">
                            <i class="layui-icon layui-icon-ok"></i>
                            提交
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<th:block th:include="include :: footer"/>
<script>
    var roleId;
    let table;
    layui.use(['table', 'form', 'jquery', 'dictionary', 'dtree'], function () {
        let dtree = layui.dtree;
        table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;

        let prefix = pName + "/system/rolePermission/";


        form.on('submit(power-save)', function (data) {
            let param = dtree.getCheckbarNodesParam("role-power");
            let ids = '';
            for (let i = 0; i < param.length; i++) {
                let id = param[i].nodeId;
                ids += id + ',';
            }
            ids = ids.substr(0, ids.length - 1);
            data.field.roleId = roleId;
            data.field.powerIds = ids;

            $.ajax({
                url: pName + '/system/rolePermission/saveRolePower',
                data: data.field,
                dataType: 'json',
                type: 'put',
                success: function (result) {
                    if (result.code == 1) {
                        layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                        });
                    } else {
                            layer.alert(result.msg, {icon: 2});
                        }
                }
            })
            return false;
        });

        let cols = [
            [
                {type: 'checkbox'},
                        {
                            field: 'id',
                            title: '主键',
                            hide: true
                        },
                        {
                            field: 'name',
                            title: '角色',
                            width: '60%'
                        },
                {title: '操作', toolbar: '#rolePermission-bar', align: 'center', width: 130}
            ]
        ]

        table.render({
            elem: '#rolePermission-table',
            url: pName + '/system/role/data',
            page: true,
            escape: true,
            cols: cols,
            skin: 'line',
            defaultToolbar: []

            ,height: 'full-100'
            ,done: function () {
                $('#card2').height($('#card1').height());

                $(".mainBox").height($('#card1').height() - 43);
            }
        });
        table.on('checkbox(rolePermission-table)', function(obj){

        });
        table.on('row(rolePermission-table)', function (obj) {

        });

        table.on('tool(rolePermission-table)', function (obj) {
            if (obj.event === 'edit') {
                window.edit(obj);
            }
        });

        form.on('submit(rolePermission-query)', function (data) {
            table.reload('rolePermission-table', {where: data.field})
            return false;
        });

        window.edit = function (obj) {
            dtree.render({
                elem: "#role-power",
                method: "get",
                url: prefix + "getRolePower?roleId=" + obj.data['id'],
                dataFormat: "list",
                checkbar: true,
                skin: "layui",
                initLevel: "2",
                checkbarType: "all",
                response: {treeId: "id", parentId: "parentId", title: "name"},
            });
            roleId = obj.data['id'];
        }

        window.refresh = function (param) {
            table.reload('rolePermission-table', {where: param});
        }

        $(window).on("resize", function () {
            $('#card2').height($('#card1').height());
            $(".mainBox").height($('#card1').height() - 43);
        });
    })
</script>
</body>
</html>